<template>
  <div class="menusearch">
      <top-header :isLeft="true" title="菜谱搜索"></top-header>
      <div class="searchmenu">
      <input type="text" placeholder="今天想吃什么？" >
      <span>×</span>
      <span>搜索</span>
      <span>取消</span>
      <hr>
      </div>
      <div class="hotsearch">
          <div class="title">热门搜索</div>
          <ul class="hot_search">
              <li  v-for="(item, index) in hotfood"
            :key="index">
            {{item}}
            </li>
          </ul>
      </div>
  </div>
</template>

<script>
import TopHeader from '../components/TopHeader.vue'
export default {
  components: { TopHeader },
data() {
    return {
        hotfood:null,
       
    }
},

methods: {
    gethotfood(){
        this.$http.get("/api/gethots")
        .then((res)=>{
           this.hotfood = res.data.data.hots.content.keywords
        })
    },
     
},
 created() {
    this.gethotfood();
  },
}

</script>
 <style lang="scss" scoped>
    .searchmenu{
        margin-top: 10px;
        height: 50px;
        input{
           width: 72%;
           height: 100%;
           border: 0;
           outline:none;
        }
      span{
          margin-right: 10px;
      }
      hr{
        margin-top: 0;
        border: 0;
        background-color: rgb(202, 198, 198);
        height: 1px;
      }
    }
    .hotsearch{
        margin-top:15px;
        .title {
      color: #aaa;
      padding: 15px 0;
    }
    .hot_search {
      padding: 0 16px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li {
        width: 30%;
        background: #f1f1f1;
        margin: 0 10px 10px 0;
        text-align: center;
        padding: $common-padding;
        box-sizing: border-box;
        list-style-type :none
      }
    }
    }
</style> 